<template>
    <div class="wrap1">
        <div class="wrapper">
            <Top :projectId="baojing"></Top>
            <div class="shu-moluai">
                <!-- <div class="sideba">
     
          <div class="right-sidebar">
            <div class="cewen-bar"> 厂区管理 </div>
            <div class="conn-bar" id="style-1">
              <div class="empty" v-if="departList.length == 0">
                暂无部门
              </div>
              <div v-else>
                  <div
                    class="item-conn" v-for="(item, index) in departList" :key="index"
                    :class="index == currentIndex ? 'lie-bg1' : 'lie-bg'"
                    @click="goDepartEquip(index,item.deptId)" 
                  >
                    {{ item.name }}
                  </div>
              </div>
            </div>
            </div>
        </div> -->
                <!-- 左边结束 -->
                <div class="main-dianli-bottomgg" id="style-1">
                    <div class="wendutable">
                        区所选择:
                        <el-select v-model="value" placeholder="请选择" @change="qiehuan">
                            <el-option v-for="item in departList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="gather-time">采集时间：2024-11-14 20:47:00</div>
                    </div>
                    <!-- 一组结束 -->
                    <!-- <div class="empty" v-if="equipList.length == 0">
            暂无设备信息
          </div> -->
                    <div class="main-dianli-kuai" style="padding-top:25px" v-if="valTrue || 1">
                        <div class="dianli-peidian" v-for="(parentsItem, parentsIndex) in equipList"
                            :key="parentsIndex">
                            <div class="mainbg-tit diyige">
                                <div class="biaoti">{{ parentsItem.cabinetName }}</div>
                                <div class="xinzengde">
                                    <div class="wendu-conmid">
                                        <div class="shangcon">
                                            <span class="chengsezi">{{ parentsItem.early_warn_value }}℃</span><span
                                                class="colred">{{ parentsItem.warn_value }}℃</span>
                                        </div>
                                        <div class="shangcon">
                                            <span>预警</span><span>报警</span>
                                        </div>
                                    </div>
                                    <div class="" style="color:#fff; padding-top:3px;padding-left: 10px;">
                                        <span v-if="parentsItem.status == '报警'" class="colred"><img
                                                src="../../../static/image/xiaobj.png" /></span>
                                        <span v-else-if="parentsItem.status == '预警'" class="chengsezi"><img
                                                src="../../../static/image/xiaobjcs.png" /></span>
                                        <span v-else><img src="../../../static/image/xiaobjls.png" /></span>
                                    </div>
                                </div>
                            </div>
                            <div class="dianli-con" @click="goDetails(parentsItem.cabinetId)">
                                <!-- <div class="dianl-tit">温度</div> -->
                                <!-- <div class="wendu-conmid">
								<span>预警温度</span><span class="chengsezi">{{parentsItem.early_warn_value}}℃</span><span>报警温度</span><span class="colred">{{parentsItem.warn_value}}℃</span>
							</div> -->
                                <div class="jian-ggg" id="style-1">
                                    <table>
                                        <tr>
                                            <th width="25% " class="lansezi">位置</th>
                                            <th width="25% " class="chengsezi">A相</th>
                                            <th width="25% " class="green">B相</th>
                                            <th width="25% " class="red">C相</th>
                                        </tr>
                                        <tr v-for="(item, index) in parentsItem.points" :key="index">
                                            <td class="lansezi">{{ item.gradation }}</td>
                                            <td class="chengsezi">{{ item.A }}</td>
                                            <td class="green">{{ item.B }}</td>
                                            <td class="red">{{ item.C }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main-dlianli-kuai" style="padding-top:25px ;" v-else>
                    </div>
                    <!-- 右边模块一 -->
                </div>

                <!-- 右边结束 -->
            </div>
        </div>
    </div>
</template>

<script>
import Top from "../../components/common/top.vue";
export default {
    components: { Top },
    data() {
        return {
            baojing: 0, //不想
            currentIndex: 0,
            departList: [],
            pId: "",
            equipList: [
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '一层',
                        A:17.5, B:20.5, C:11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '一层',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '一层',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '一层',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '一层',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },
                {
                    cabinetName: '技术部',
                    early_warn_value: 1,
                    warn_value: 0,
                    points: [{
                        gradation: '一层',
                        A: 17.5, B: 20.5, C: 11.5,

                    }],

                },

            ],
            valTrue: true,
            value: "冠县",
            options: [],
            deptId: 3
        };
    },
    beforeDestroy() {
        clearInterval(this.tm2);
    },
    created() {
        this.getseletop();
        if (this.$route.query.pId) {
            this.pId = this.$route.query.pId;
        }
        if (this.$route.query.currentIndex) {
            this.currentIndex = this.$route.query.currentIndex;
        }
    },
    mounted() {
        this.roomsfun();
        this.warningfun();
        this.tm2 = setInterval(() => {
            this.warningfun();
        }, 30000);
    },
    methods: {
        getseletop() {
            let userId=this.$auth.get("userid")
            this.$apiv.LoginGetDept({
                id:userId
            }).then(deptRes=>{
                console.log("根据用户id返回dept",deptRes);
                this.departList = deptRes.data;
                this.value=this.departList[0].name
                this.deptId=this.departList[0].id
                this.roomdetailsfun();
            })
            // this.$apiv.setsectlt({}).then(res => {
            //     console.log(res, "选择框");
            //     this.options = res.data;
            //     this.value = res.data[0].name;
            //     this.deptId = res.data[0].deptId;
            //     this.roomdetailsfun();
            // });
        },
        qiehuan(value) {
            console.log(value);
            this.deptId = value;
            this.roomdetailsfun();
            // if (value == '3') {
            //   this.valTrue = false;
            // } else {
            //   this.valTrue = true;
            // }
        },
        warningfun() {
            this.loginLoading = true;
            this.$apiv
                .warning({})
                .then(res => {
                    console.log("ggg", res.data);
                    if (res.data.is_ok == true) {
                        this.baojing = 1;
                    } else {
                        this.baojing = 0;
                    }
                    this.loginLoading = false;
                })
                .catch(res => {
                    this.loginLoading = false;
                });
        },
        roomsfun() {
            this.loginLoading = true;
            let userId=this.$auth.get("userid")
            this.$apiv.LoginGetDept({
                id:userId
            }).then(deptRes=>{
                console.log("根据用户id返回dept",deptRes);
                this.departList = deptRes.data;
                let data=deptRes.data;
                if (data.length > 0) {
                    this.pId = data[0].deptId;
                }
                this.roomdetailsfun();
                this.loginLoading = false;
            }).catch(res => {
                this.loginLoading = false;
            });
            // this.$apiv
            //     .rooms({})
            //     .then(res => {
            //         this.departList = res.data;
            //         if (res.data.length > 0) {
            //             this.pId = res.data[0].deptId;
            //         }
            //         this.roomdetailsfun();
            //         this.loginLoading = false;
            //     })
            //     .catch(res => {
            //         this.loginLoading = false;
            //     });
        },
        goDepartEquip(index, id) {
            this.currentIndex = index;
            this.pId = id;
            this.roomdetailsfun();
        },
        roomdetailsfun() {
            this.loginLoading = true;
            this.$apiv
                .roomdetails({ deptId: this.deptId })
                .then(res => {
                    console.log(res.data);
                    // this.equipList = res.data;
                    // 由于无烟感数据暂时不更新后台数据
                    this.loginLoading = false;
                })
                .catch(res => {
                    this.loginLoading = false;
                });
        },
        goDetails(id) {
            this.$router.push({
                path: "/ele_detail",
                query: {
                    pId: this.pId,
                    cabinetId: id,
                    currentIndex: this.currentIndex
                }
            });
        },

    }
};
</script>

<style scoped>
@import url("../../../static/zhuti.css");

.wendutable {
    position: relative;
}

.gather-time {
    display: inline-block;
    float: right;
}
</style>
